<script setup>
	import SongItemProp from "@/const/SongItemProp.js";

	const props = defineProps(SongItemProp);

	const iconAttr = {
		style: "margin-right: 16px",
		type: "heart",
		size: "16",
		color: "#fff",
	};
</script>

<template>
	<section class="song-item">
		<view class="info">
			<image class="info-img" :src="props.cover" />
			<view class="name-singer">
				<view class="name">{{ props.name }}</view>
				<view class="singer">{{ props.singer }}</view>
			</view>
		</view>
		<view>
			<uni-icons />
			<uni-icons v-bind="iconAttr" />
		</view>
	</section>
</template>

<style scoped lang="scss">
	.song-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 14px;
	}

	.info {
		display: flex;
		flex: 1;
		.info-img {
			width: 40px;
			height: 30px;
			object-fit: contain;
			border-radius: 4px;
		}
		.name-singer {
			margin-left: 20px;

			.name {
				font-size: 12px;
				color: rgba(#fff, 0.6);
			}

			.singer {
				font-size: 10px;
				color: rgba(#fff, 0.6);
			}
		}
	}
</style>
